<template>
    <!-- 显示图片/视频的组件 -->
    <!-- 点击的时候打开新窗口 -->
    <div class="image-panel" @click="showImageHandler">
        <el-image :src="serverUrl" fit="scale-down" :width="width">
            <template #error>
                <div class="iconfont icon-tongyonglei-tuxiang_cuowu"></div>
            </template>
        </el-image>
        <div class="play-panel" v-if="showPlay">
            <span class="iconfont icon-bofang"></span>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
import { computed } from "@vue/reactivity"

const props = defineProps({
    width: {
        type: Number,
        default: 170,
    },
    // 是否显示播放按钮（有的图可以播放）
    showPlay: {
        type: Boolean,
        default: false,
    },
    fileId: {
        type: [String, Number],
    },
    partType: {
        type: String,
        default: "avatar"
    },
    fileType: {
        type: [String, Number],
        default: 0
    },
    forceGet: {
        type: Boolean,
        default: false
    }
})

import { useGlobalInfoStore } from "../stores/GlobalInfoStore";
const globalInfoStore = useGlobalInfoStore();

const serverUrl = computed(() => {
    if (!props.fileId) {
        return;
    }
    // 获取图片的地址
    const serverPort = globalInfoStore.getInfo("serverPort");
    return `http://localhost:${serverPort}/file/` +
        `?fileId=${props.fileId}&partType=${props.partType}` +
        `&fileType=${props.fileType}&isCover=true&forceGet=${props.forceGet}` +
        `&${new Date().getTime()}`; // 防止缓存
})
</script>

<style lang="scss" scoped>
.image-panel {
    position: relative;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    max-width: 170px;
    max-height: 170px;
    background: #ddd;

    .icon-tongyonglei-tuxiang_cuowu {
        margin: 0 auto;
        font-size: 30px;
        color: #838383;
    }

    .play-panel {
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .icon-bofang {
            font-size: 35px;
            color: #fff;
        }

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>
